<template>
    <div class="info">
        <div class="info-header">
           <div class="info-box">
              <div class="info-tabs">
                  <div v-for="(item, index) in tabs" :key="index" class="info-item" :class="index == current ? 'on' : ''" @click="changeTabs(index, item)">
                      {{ item.title }}
                  </div>
              </div>
              <div class="info-route" v-if="!screenFlag">
                  <span class="info-name" @click="toPage('Home')">首页</span>
                  <span class="info-arrows">></span>
                  <span class="info-name">看看宇宙学院</span>
              </div>
           </div>
        </div>
        <!-- 分类列表 -->
        <div class="rule" v-if="current == 0">
          <div class="category-box">
          <div class="category-list">
            <div v-for="(category, index) in sort_list" :key="index" class="category-item" :class="{'category-item-active' : sort_index == index }" @click="selectCategory(category,index)">
                <span>{{ category.name }}</span>
            </div>
          </div>
          </div>
          <div class="info-content">
            <div class="info-nape flex flex-ac" v-for="(item, index) in list" :key="index">
                <div class="card" @click.stop="openDetails(item.id)">
                    <div class="info-img-box">
                      <img :src="$imgUrl(item.image)" class="info-img" alt="Image" />
                    </div>
                    <div class="card-content">
                        <div class="info-title nowrap2">{{ item.title }}</div>
                        <div class="info-bottom" v-if="!screenFlag">
                           <span>{{ item.view_count }} 人看过</span>
                           <button @click.stop="toPage('UniverseDetails', { id: item.id })">去学习</button>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="feature-center" v-else-if="current == 1">
            <div class="feature-center-box">
                <div class="feature-content" v-if="level2_info?.title">
                    <div class="feature-content-title">{{level2_info.title}}</div>
                    <div class="feature-content-info">
                        <div class="info-left">
                            <div class="info-left1">
                              <img :src="$imgUrl(level2_info.kankan_avatar)"  alt="">
                              <span>{{level2_info.kankan_author}}</span>
                            </div>
                            <div class="info-left2">
                              <el-icon color="#7285A0" size="12"><View /></el-icon>
                              <span>{{level2_info.view_count}}</span>
                            </div>
                        </div>
                        <div class="info-rigth">{{level2_info.create_time_date.replace(/-/g, ".")}}</div>
                    </div>
                    <div class="feature-text" v-html="level2_info.content"></div>
                </div>
                <!-- 缺省图组件 -->
                <defaultImg v-else></defaultImg>
                <div class="feature-cover"  @click.stop="closeMenu" v-if="sort_list?.length > 0&&showMenu">
                </div>
                <div class="feature-vessel flex flex-ac jc-ct flex-column" @click.stop="openMenu" v-if="sort_list?.length > 0&&screenFlag">
                    <img src="@/assets/img/college/menu.png"/>
                    <span class="feature-catalogue">目录</span>
                </div>
                <div class="feature-menu" v-if="sort_list?.length > 0&&(!screenFlag||showMenu)">
                    <div class="feature-title">目录</div>
                    <div class="search-box">
                        <el-icon color="#B0B9C4" size="14"><Search /></el-icon>
                        <input type="text" @input="blurEvent" @focus="is_show = true"  v-model="inputValue" placeholder="在目录中搜索" class="search-input">
                    </div>
                    <div class="modal" v-if="is_show && search_list?.length > 0">
                       <div class="modal-list" v-for="(item,index) in search_list" :key="index" @click="selectSeatch(item)">{{item.title}}</div>
                    </div>
                    <div class="feature-type-list" v-if="sort_list?.length > 0">
                         <div class="feature-type-item" v-for="(item,index) in sort_list" :key="index" @click="openType(item,index)">
                            <div class="level1" :class="{'level1-active':sort_index == index}">
                                <img :src="sort_index == index? cicon2 : cicon1" class="Down-cicon" alt="">
                                <span>{{item.name}}</span>
                            </div>
                            <div class="level2" v-if="item.contentTitle?.length > 0 && sort_index == index">
                                <div class="level2-item" :class="{'level2-item-active' : level2_index == indexs}" v-for="(items,indexs) in item.contentTitle" :key="indexs" @click.stop="selsectLevel(items,indexs)">{{items.title}}</div>
                            </div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-footer flex flex-ac jc-ct"  v-if="current == 0&&total>0&&screenFlag">
            <div class="flex flex-ac">
                <div class="info-footer-prev flex flex-ac jc-ct" :class="page==1?'disabled':''" @click="prev">上一页</div>
                <div class="info-footer-next flex flex-ac jc-ct" :class="hasNext?'':'disabled'" @click="next">下一页</div>
            </div>
        </div>
        <div class="info-footer-box" v-if="current == 0&&!screenFlag">
           <div class="info-footer flex flex-ac jc-sb" v-if="total>0">
            <div class="info-footer-total">共{{ total }}条</div>
               <el-pagination
                size="small"
                background
                v-model:current-page="page"
                v-model:page-size="limit"
                :page-sizes="[10, 20, 30, 40]"
                layout="prev, pager, next , sizes"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
               />
           </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getArticleCategory, getArticleList, getTypeList, getList, getCollegeDetails } from '@/api/index.js';
import cicon2 from '@/assets/img/college/Down-cicon2.png'
import cicon1 from '@/assets/img/college/Down-cicon1.png'
const props = defineProps({
  screenFlag: {
    type: Boolean,
    default: false
  }
})
const router = useRouter();
const route = useRoute();
const tabs = ref([{ title: '规则中心', id: '1' }, { title: '功能中心', id: '2' }]);
const list = ref([]);
const sort_list = ref([]); // 分类列表
const current = ref(0);
const total = ref(0);
const page = ref(1);
const limit = ref(10);
const hasNext = ref(true);
const category_id = ref();
const sort_index = ref(0);
const level2_index = ref(0)
const level2_info = ref({})
const inputValue = ref('')
const search_list = ref([])
const is_show = ref(false)
const showMenu = ref(false)
// Tab切换
const changeTabs = (index, item) => {
    total.value = 0;
    current.value = index;
    sort_index.value = 0
    level2_info.value = {}
    getTypeListApi(item.id);
};

// 选择分类
const selectCategory = (category, index) => {
    page.value = 1; 
    sort_index.value = index;
    category_id.value = category.id;
    getListApi();
};

//关闭菜单
const closeMenu = () =>{
    showMenu.value = false;
} 

//打开菜单
const openMenu = () =>{
    showMenu.value = !showMenu.value
}

//H5进入详情
const openDetails = (id) =>{
    if(props.screenFlag){
        toPage('UniverseDetails', { id })
    }
}

// 路由跳转
const toPage = (name, params) => {
    router.push({ name, query: params });
};

// 分类
const getTypeListApi = async (pid,is_search = false,is_init = false) => {
    const { data } = await getTypeList({ pid , keyword:inputValue.value });
    if(is_search){
     search_list.value = data
    }else{
     sort_list.value = data; // 假设数据结构
     category_id.value = data[0]?.id; // 使用可选链
     openType(data[0],0)
     getListApi();
    }
    // 首页看看学院跳转打开对应的目录
    if(is_init){
      let level1_index = sort_list.value.findIndex((item) => item.id == route.query.level1_id)
      let level2_index = sort_list.value[level1_index].contentTitle.findIndex((item) => item.id == route.query.level2_id)
       openType(sort_list.value[level1_index] , level1_index)
       selsectLevel(sort_list.value[level1_index].contentTitle[level2_index] , level2_index)
    }
};

const getListApi = async () => {
    const { data } = await getList({ rule_type_id: category_id.value, page: page.value, page_size: limit.value });
    list.value = data.list;
    total.value = data.count;
    hasNext.value = page.value * limit.value < total.value;
};

// 获取目录详情
const getCollegeDetailsApi = async(id) => {
 const {data} = await getCollegeDetails({id})
 level2_info.value = data
}

// 切换筛选条数
const handleSizeChange = (e) => {
    console.log(page.value);
};

// 切换页数
const handleCurrentChange = (e) => {
    getListApi();
};

// 上一页
const prev = () =>{
    if(page.value > 1){
        page.value --;
        getListApi();
    }
}

//下一页
const next = () =>{
    if(hasNext.value){
        page.value ++;
        getListApi();
    }
}

// 打开一级分类
const openType = (item,index) => {
 sort_index.value = index;
 level2_info.value = {}
 level2_index.value = 0 
//  showMenu.value = false
 if(item.contentTitle?.length > 0){
  getCollegeDetailsApi(item.contentTitle[0].id)
 } 
}

const selsectLevel =(item,index) => {
 level2_index.value = index
 is_show.value = false
 showMenu.value = false
 getCollegeDetailsApi(item.id)
}

// 搜索事件
const blurEvent = () => {
   if(inputValue.value.trim() == ''){
    search_list.value = []
   }else{
    getTypeListApi(2,true)
   }
}

// 选择搜索结果
const selectSeatch = (item) => {
    is_show.value = false
    showMenu.value = false
    getCollegeDetailsApi(item.id)
    sort_index.value = sort_list.value.findIndex(items => items.id == item.rule_type_id)
    level2_index.value = sort_list.value[sort_index.value].contentTitle.findIndex(items => items.id == item.id)
}

// 挂载
onMounted(() => {
    if(route.query?.type_id){
      getTypeListApi(tabs.value[1].id,false,true);
      current.value = 1;
    }else{
      getTypeListApi(tabs.value[0].id,false);
    }
   
});

</script>

<style scoped lang="less">
@import './index.less';
</style>
